<template>
	<view>

		<view class="previewInfor_con">
			<view class="previewTit">记工信息</view>
			<view class="previewItem">地点：{{keepObj.address}}</view>
			<view v-if="keepObj.selectType=='0'">
				<view class="previewItem">
					上班：{{keepObj.workNum}}
					<view v-if="keepObj.workType=='1' || keepObj.workType=='2' || keepObj.workType=='4'">
						个工</view>
					<view v-if="keepObj.selectOver=='1'"></view>
					<view v-if="keepObj.selectOver=='2'">，加班：{{keepObj.overWork}}个工</view>
					<view v-if="keepObj.selectOver=='3'">，加班：{{keepObj.overWork}}个小时</view>
				</view>
				<view class="previewItem">
					工资：{{keepObj.workMoney}}
				</view>
			</view>
			<view class="previewItem" v-if="keepObj.selectType=='2'">
				工资：{{keepObj.workInput}}
			</view>
		</view>

		<view class="previewCamera_com">
			<!-- <image :src="keepObj.cameraUrl" mode="widthFix" class="cameraPic"></image> -->
			<view class="cameraPic">
				<image :src="filePath" mode="aspectFit" crossorigin="Anonymous"></image>
			</view>

		</view>

		<view class="previewTips_con">
			图片已保存至手机相册
		</view>

		<view class="previewPost_con">
			<view class="previewBtn" @click="goBack">
				<view class="previewIcon">
					<u-icon name="reload" color="#2979ff" size="50"></u-icon>
				</view>
				<view class="previewType">重拍</view>
			</view>
			<view class="previewBtn" @click="$u.throttle(completeClick, 3000)">
				<view class="previewIcon">
					<u-icon name="checkmark" color="#2979ff" size="50"></u-icon>
					<view class="previewType">完成记工</view>
				</view>
			</view>
		</view>
		
		
		<!-- 添加水印canvas -->
		<view class="canvasCon">
			<canvas canvas-id="firstCanvas" 
				:style="'width:' + canvasWidth +'px;height:'+ canvasHeight + 'px;'"></canvas>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 默认工地信息
				defaultWorksite: JSON.parse(uni.getStorageSync('defaultWorksite')),

				// 记工信息
				keepObj: {
					selectType: 0, // 默认点工
					workType: 1, // 默认1个工
					workNum: 1, // 提交的工
					workInput: '', // 输入的工
					workMoney: 0,
					selectOver: 1, // 加班
					overWork: 0,
					cameraUrl: '',
					cameraId: '',
					address: '',
					lng: '',
					lat: '',
				},

				filePath: '',
				nowTime:'',
				address:'',
				canvasWidth:0,
				canvasHeight:0,
				
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		async onLoad(options) {
			// console.log(options);
			// var keepJson = options.keepJson;
			// this.keepObj = JSON.parse(keepJson);
			// console.log(this.keepObj)
			console.log('options==========')
			console.log(options)
			this.filePath = options.filePath;
			
			if(options.way=='app'){
				this.keepObj=JSON.parse(options.keepObj)
				this.nowTime=options.nowTime
				this.address=options.address
				this.addWatermark(options.filePath);
			}else{
				
				this.imageUpload(options.filePath);
			}
			

			console.log(this.defaultWorksite)
		},
		onShow() {

		},
		onReady() {},
		methods: {
			
			
			addWatermark(tempPath) {
				var _this = this;
				// 获取图片信息
				uni.getImageInfo({
					src: tempPath,
					success: (imgRes) => {
						
						var ctx = uni.createCanvasContext('firstCanvas');
						_this.canvasWidth = imgRes.width;
						_this.canvasHeight = imgRes.height;
			
						// 将图片src放到canvas内，宽高为图片大小
						ctx.drawImage(_this.filePath, 0, 0, imgRes.width, imgRes.height)
			
						// 绘制工地背景
						ctx.strokeStyle = 'rgba(50,127,232,0.8)'
						ctx.strokeRect(20, imgRes.height - 300, 560, 60)
						ctx.fillStyle = 'rgba(50,127,232,1)'
						ctx.fillRect(20, imgRes.height - 300, 560, 60)
			
						// 绘制黄色矩形
						ctx.strokeStyle = '#FF8A00'
						ctx.strokeRect(20, imgRes.height - 220, 6, 160)
						ctx.fillStyle = '#FF8A00'
						ctx.fillRect(20, imgRes.height - 220, 6, 160)
			
						ctx.setFontSize(24) //注意：设置文字大小必须放在填充文字之前，否则不生效
						ctx.setFillStyle('#fff')
			
						// 点工
						if (_this.keepObj.selectType == '1') {
							ctx.fillText(_this.defaultWorksite.project_name + '：' + '[点工]', 40, imgRes
								.height -
								260)
						}
						// 包工
						if (_this.keepObj.selectType == '2') {
							ctx.fillText(_this.defaultWorksite.project_name + '：' + '[包工]', 40, imgRes
								.height -
								260)
						}
			
						ctx.fillText('时间：' + _this.nowTime, 40, imgRes.height - 190)
						ctx.fillText('地点：' + _this.address, 40, imgRes.height - 150)
			
						// 点工
						if (_this.keepObj.selectType == '1') {
							// workType：1 工、2 0.5工、3休息、4自定义工
							if (_this.keepObj.workType == '1' || _this.keepObj.workType == '2' || _this.keepObj
								.workType == '4') {
								ctx.fillText('上班:' + _this.keepObj.workNum + '个工', 40, imgRes.height - 110)
							}
							if (_this.keepObj.workType == '3') {
								ctx.fillText('上班:' + _this.keepObj.workNum, 40, imgRes.height - 110)
							}
							if (_this.keepObj.selectOver == '2') {
								ctx.fillText('上班:' + _this.keepObj.workNum + '个工,加班' + _this.keepObj.overWork +
									'个工', 40,
									imgRes.height - 110)
							}
							if (_this.keepObj.selectOver == '3') {
								ctx.fillText('上班:' + _this.keepObj.workNum + '个工,加班' + _this.keepObj.overWork +
									'个小时',
									40, imgRes.height - 110)
							}
							// ctx.fillText('工资：' + _this.keepObj.workMoney, 40, imgRes.height - 70)
						}
			
						// 包工
						if (_this.keepObj.selectType == '2') {
							ctx.fillText('工资:' + _this.keepObj.workInput, 40, imgRes.height - 110)
						}
			
						// 安全提示
						ctx.drawImage('/static/camera/safeIcon.png', 20, imgRes.height - 45, 30, 30)
						ctx.fillText('记工本水印相机已验证时间地点真实性', 60, imgRes.height - 20)
						ctx.stroke()
						ctx.draw(false, function() {
							uni.showLoading({
								title: '图片保存中'
							});
							setTimeout(function(){
								uni.canvasToTempFilePath({
									canvasId: 'firstCanvas',
									fileType: 'jpg',
									quality: 1,
									success: (res) => {
										console.log(res);
										var filePath = res.tempFilePath;
										_this.filePath = filePath;
								
										// 保存到相册
										uni.saveImageToPhotosAlbum({
											filePath: filePath,
											success(res) {
												uni.showToast({
													title: '已保存到相册',
													duration: 2000
												});
												uni.hideLoading()
											}
										});
								
										_this.imageUpload(filePath);
									},
									fail: (res) => {
										uni.hideLoading()
										console.log(res)
									}
								})
							},300)
							
						})
						
					}
				})
			},
			// 图片上传到云端
			imageUpload(filePath) {
				var _this = this;
				uni.uploadFile({
					url: _this.$baseURL + '/api/plus.upload/imgUpload',
					filePath: filePath,
					name: 'file',
					formData: {
						type:'anxinji',
						project_id:_this.defaultWorksite.project_id,
						time:_this.$util.nowDate(),
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
						'token': uni.getStorageSync('token'),
					},
					success: function(res) {
						// console.log(res);
						var resData = JSON.parse(res.data)
						_this.keepObj.cameraId = resData.data.imgID;
						_this.keepObj.cameraUrl = resData.data.url;
					},
					complete: function(res) {

					}
				});
			},

			// 获取用户信息
			getUserInfo() {
				var _this = this;
				_this.$u.get('/api/user.index/getDetail', {}).then(res => {
					uni.hideLoading();
					console.log("==获取用户信息==");
					console.log(res);
					_this.userInfo = res.data;
				}).catch(res => {
					console.log(res);
				})
			},

			// 返回
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},

			// 完成记工
			completeClick() {
				var _this = this;

				var para = {
					project_id: _this.defaultWorksite.project_id,
					id: '',
					add_date: _this.$util.nowDate(),
					address: _this.keepObj.address,
					lng: _this.keepObj.lng,
					lat: _this.keepObj.lat,
					imgs: _this.keepObj.cameraId,
					remark: '',
					data: '',
				}

				var data = [];
				var dataObj = {
					member_id: _this.defaultWorksite.member_id,
					work_type: _this.keepObj.selectType,
					num: _this.keepObj.workNum,
					overtime_days: 0,
					overtime_hour: 0,
					price: 0,
				};

				// 点工
				if (_this.keepObj.selectType == 0) {
					dataObj.num = _this.keepObj.workNum;
					dataObj.price = 0;
				} else if (_this.keepObj.selectType == '1') {
					// 包工
					dataObj.num = 0;
					dataObj.price = _this.keepObj.workNum;
				}

				// 加班按工
				if (_this.keepObj.selectOver == '2') {
					dataObj.overtime_days = _this.keepObj.overWork;

				}

				// 加班按小时
				if (_this.keepObj.selectOver == '3') {
					dataObj.overtime_hour = _this.keepObj.overWork
				}

				data.push(dataObj);

				para.data = JSON.stringify(data);

				console.log("==提交参数==")
				console.log(para)

				_this.$u.post('/api/project.work/add_do2', para).then(res => {
					uni.showModal({
						content: '记工成功',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateBack({
									delta: 2
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}).catch(res => {
					console.log(res);
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.previewInfor_con {
		padding: 30rpx;
		color: $uni-color-active;
		background-color: #fff;
		overflow: hidden;
	}

	.previewTit {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.previewItem {
		display: flex;
		align-items: center;
		// margin-bottom: 20rpx;
	}

	.previewCamera_com {
		background-color: #909399;
		height: 700rpx;
	}

	.cameraPic {
		width: 650rpx;
		height: 700rpx;
		margin: 0 auto;
	}

	.cameraPic image {
		width: 100%;
		height: 100%;
		;
	}

	.previewTips_con {
		padding: 30rpx;
		color: $uni-color-active;
		text-align: center;
		overflow: hidden;
	}

	.previewPost_con {
		width: 100%;
		height: 30vh;
		position: fixed;
		bottom: 0;
		left: 0;
		overflow: hidden;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.previewBtn {
		flex: 1;
		text-align: center;
	}

	.previewType {
		font-size: 32rpx;
		color: $uni-color-active;
		margin-top: 20rpx;
	}
	
	
	// 添加水印canvas
	.canvasCon {
		width: 0;
		height: 0;
		position: fixed;
		left: 900000px;
		z-index: -999;
		overflow: hidden;
	}
</style>
